<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 响应式的核心函数(数据劫持)

    // 接受三个值 原对象 属性 属性的值
    function defineReactive(obj, key, value) {
      // 判断它的值有没有对象或数组之类
      observe(value)
      Object.defineProperty(obj, key, {
        get() {
          console.log('收据依赖性放在dep数组中');
          return value
        },
        set(newValue) {
          // 更新数据
          console.log('通知所有的依赖更新了');
          value = newValue
        }
      })
    }

    // 对数据开始响应式操作
    function observe(obj) {
      // 如果类型是对象就执行
      if (obj instanceof Object) {
        for (let key of Object.keys(obj)) {
          //遍历对象后，把对象中每一个属性都交给defineReactive进行响应式处理
          defineReactive(obj, key, obj[key]);
        }
      }
    }

    // 原数据
    const vm = {
      _data: {
        name: '罗飞',
        age: 18,
        love: { one: '唱', two: '跳', three: '篮球' },
        movies: [
          { id: "001", movieName: "绿皮书" },
          { id: "002", movieName: "魔戒" },
        ],
      }
    }
    observe(vm._data);
  </script>
</body>

</html>